<script setup>
import Images from '@/components/Images/Index.vue';

const emits = defineEmits(["selectAtUser"])
const props = defineProps({
  top: {
    type: Number,
    default: -1
  },
  left: {
    type: Number,
    default: -1
  }
})

function selectUser (user) {
  emits("selectAtUser", { userId: 1, nickName: "名称231", signature: '签名23123' })
}

</script>
<template>
  <div class="g-at__list">
    <!-- 图片  名称 个性签名 -->
    <div class="at__item" v-for="item in 10" @click="selectUser">
      <Images class="u-avatar" src="123" style="width: 30px;height: 30px;" />
      <div class="at__item__main">
        <div class="at__item__name">名称</div>
        <div class="at__item__personality">个性签名</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.g-at__list {
  position: absolute;
  top: v-bind("top + 'px'");
  left: v-bind("left + 'px'");
  width: 200px;
  height: 200px;
  background-color: white;
  padding: 10px 0;
  border-radius: 6px;
  box-shadow: 1px 1px 1px 1px #0001, -1px -1px 1px 1px #0001;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.at__item {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 20px;
  font-size: 12px;
  border-bottom: 1px solid #ccc;

  &__main {
    text-align: left;
  }
}
</style>